<gm:page title="Feed Reader" class="tasksTheme" css="http://simplefeadreader.googlemashups.com/resources/.css" authenticate="true">   
   
   <!-- The feed reader application demonstrates the JS API's list function
        setData(). Users can create a feed of their favorite blogs and then
	dynamically set the data set of a list control to display the 
	different blog entries.
	@author:GME Team
   -->

   <style>

   .gm-pager-button {     
     background:#C3D9FF;
     border:medium none;
     color:#112ABB;
     cursor:pointer !important;
     padding:2px;
     text-decoration:underline;
    }      
    </style>  
     
     
  <div style="padding:15px"> 
  <!-- Table for the header -->
  <table width="100%">   
     <tbody>
       <tr>
           <td valign="top">
              <div id="header">
                <div id="logo">
                 </div>
              </div>
            </td>         
        </tr>
      </tbody>
   </table>
   
  <table width="100%" style="margin-bottom:20px">
    <tr>
      <td>
      </td>
    </tr>
  </table>
   <div><INPUT type="button" value="+ Add a Feed" 
                    style="border:none;background:white;color: #0000CC;text-decoration:underline;font-weight:bold;padding:0;margin-bottom:2em;" 
                    onClick="show('blogForm');"></INPUT>
   <div id="blogForm" style="display:none">
      <gm:item create="true" data="${user}/blogs" template="submitForm" >
        <gm:handleEvent event="all" execute="hide('blogForm');"/>
       </gm:item>
   </div>
   </div>
 
   <table width="100%" style="margin-top:5px;">
    <tr valign="top">
      <td width="200" class="sideTabs" valign="top">
        
        <gm:list id="blogList" data="${user}/blogs" template="blogRollTemplate">
          <gm:handleEvent event="select" execute="changeData();"/>
        </gm:list>
      </td>
      <td valign="top">
      <div>
          <gm:list id="blogRead" data="${app}/myData" template="blogReadTemplate" pagesize="5">
          </gm:list>
      </div>
      </td>
    </tr>
  </table>
  
  </div>

  <gm:template id="blogRollTemplate">
    <table width="200" style="margin-top:10px;">    
      <tbody repeat="true">
        <tr>
          <td width="160" style="padding:5px:"><gm:text style="width:140px;color:blue;text-decoration:underline;" ref="atom:title"/></td>
          <td width="40" style="padding:5px:" nowrap="true"><gm:editButtons deleteonly="true" class="gm-select-only"/></td>
        </tr> 
       </tbody>
     </table>
  </gm:template>
  
  
  <gm:template id="blogReadTemplate">
    <table width="90%">
     <thead>
        <tr><td style="background:#C3D9FF;padding:5px;-moz-border-radius:4 4 0 0;"><strong>Recent Blog Posts</strong></td></tr>
      </thead>   
      <tbody repeat="true">
        <tr>
          <td  style="padding:5px;padding-left:10px"><gm:link style="color:blue;text-decoration:underline;font-size:110%;font-weight:bold;" labelref="atom:title" ref="atom:link[@rel='alternate']/@href"/></td>
        </tr>
        <tr>  
          <td style="padding:5px;padding-left:10px"><gm:html ref="atom:summary"/></td>
        </tr>
        <tr>  
          <td style="padding:5px;padding-left:10px"><gm:html ref="atom:content"/></td>
        </tr>
        <tr>  
          <td style="padding:5px;border-bottom:1px solid #e6e6e6;padding-left:10px;margin-bottom:3em;"></td>
        </tr>
       </tbody>
        <tfoot >
        <tr><td style="background:#C3D9FF;padding:5px;-moz-border-radius: 0 0 4 4;"><gm:pager/></td></tr>
      </tfoot>   
     </table>
  </gm:template>
  
  
  <gm:template id="submitForm">
    <table>    
      <tbody repeat="true">
        <tr valign="top">
          <td style="padding:5px;" nowrap="true" valign="top">Blog Title:</td><td valign="top"><gm:text ref="atom:title" /></td>
        </tr>
        <tr>  
          <td style="padding:5px;" nowrap="true" valign="top">Blog URL:</td><td valign="top"><gm:text ref="gd:url" size="50"/></td>
        </tr>
        <tr>  
          <td style="padding:5px;" nowrap="true" valign="top"><gm:editButtons text="true"/></td>
        </tr> 
       </tbody>
     </table>
  </gm:template>
  
  
  
  <script>
  
   function changeData() {
   
      var feed = google.mashups.getObjectById('blogList').getData();
      var entry = google.mashups.getObjectById('blogList').getSelectedEntry();
      var urlGPath = new GPath("gd:url");
      var urlString = urlGPath.getValue(entry);
      google.mashups.getObjectById('blogRead').setData(urlString);
   
   }   
  
    function show(div1) {
      
      var show = document.getElementById(div1);
      
      show.style["display"] = "block";
     
   }
   function hide(div1) {
      
      var hide = document.getElementById(div1);
      
      hide.style["display"] = "none";
     
   }

  </script> 


</gm:page>
